<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 栅格 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索框 -->
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getCommodityList"
          >
            <el-select
              v-model="queryInfo.queryType"
              slot="prepend"
              placeholder="请选择"
              style="width: 110px"
            >
              <el-option label="商品名称" :value="0"></el-option>
              <el-option label="商品类型" :value="1"></el-option>
              <el-option label="店铺名称" :value="2"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getCommodityList"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 添加商品 -->
        <el-col :span="6">
          <el-button type="primary" @click="goodsAdd">添加商品</el-button>
        </el-col>
        <!-- 回收箱 -->
        <i class="el-icon-delete recycling" @click="showRecycling"></i>
      </el-row>
      <!-- 商品列表 -->
      <el-table :data="commodityList" border stripe>
        <!-- 索引列 -->
        <el-table-column label="Id" type="index"></el-table-column>
        <!-- 店铺名称 -->
        <el-table-column label="店铺名称" prop="storeName"></el-table-column>
        <!-- 商品名称 -->
        <el-table-column
          label="商品名称"
          prop="commodityName"
        ></el-table-column>
        <!-- 商品类型 -->
        <el-table-column
          label="商品类型"
          prop="commodityTypeName"
        ></el-table-column>
        <!-- 商品价格 -->
        <el-table-column
          label="商品价格"
          prop="commodityPrices"
        ></el-table-column>
        <!-- 商品库存 -->
        <el-table-column
          label="商品库存"
          prop="commodityStocks"
        ></el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态">
          <!-- 商品状态作用域插槽 -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isActived"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="commodityStateChanged(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button size="mini" @click="goodsEdit(scope.row.id)"
              >编辑</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              size="mini"
              @click="removecommodityById(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 商品回收箱的对话框 -->
    <el-dialog
      title="商品回收箱"
      :visible.sync="recyclingDialogVisible"
      width="50%"
      :before-close="recyclingDialogExit"
    >
      <!-- 回收箱表格区域 -->
      <el-table :data="deleteCommodityList" border stripe>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <!-- 店铺名称 -->
        <el-table-column prop="storeName" label="店铺名称"> </el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="commodityName" label="商品名称">
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 恢复 -->
            <el-button size="mini" @click="recyclingcommodity(scope.row.id)"
              >恢复</el-button
            >
            <!-- 彻底删除 -->
            <el-button
              type="danger"
              size="mini"
              @click="deletecommodityById(scope.row.id)"
              >彻底删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="recyclingDialogExit">退 出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取商品列表的参数对象
      queryInfo: {
        // 查询的参数
        query: '',
        // 当前的页数
        pageIndex: 1,
        // 当前每页显示几条数据
        pageSize: 3,
        // 搜索框前选择框选中的名字
        queryType: 0,
        // 回收箱功能，已被删除的商品的isDeleted字段
        recycle: false
      },
      // 商品列表
      commodityList: [],
      // 商品总数
      total: 0,
      // 商品回收箱的显示与隐藏
      recyclingDialogVisible: false,
      // 已被删除的商品
      deleteCommodityList: []
    }
  },
  // 钩子函数
  created () {
    // 调用获取商品列表的方法
    this.getCommodityList()
  },
  methods: {
    // 获取商品列表
    async getCommodityList () {
      const { data: res } = await this.$http.get('Commodities', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        // 获取商品列表失败
        return this.$message.error('商品列表获取失败！')
      } else {
        // 获取商品列表成功
        // 将返回的数据中的commodities商品列表赋值给commodityList
        this.commodityList = res.data.commodities
        // 将返回的数据中的pageTotal商品总数赋值给total
        this.total = res.data.pager.pageTotal
        // 将获取到的已删除的用户数据赋值给deletecommodityList数组中
        this.deleteCommodityList = res.data.deletedCommodities
      }
    },
    // 监听商品状态的改变
    async commodityStateChanged (commodityInfo) {
      // 往数据库中更新
      const { data: res } = await this.$http.put(`Commodities/status/${commodityInfo.id}`)
      if (res.meta.status !== 200) {
        // 商品状态更新失败
        // 将UI界面上的状态值取反，也就是取消了状态的改变
        commodityInfo.isActived = !commodityInfo.isActived
        // 返回更新失败的提示信息
        return this.$message.error('商品状态更新失败！')
      } else {
        // 商品状态更新成功
        // 返回更新成功的提示信息
        return this.$message.success('商品状态更新成功！')
      }
    },
    // 处理X条/页改变
    handleSizeChange (newSize) {
      // 每条几条
      this.queryInfo.pageSize = newSize
      // 重新获取商品列表
      this.getCommodityList()
    },
    // 处理当前页改变
    handleCurrentChange (newPage) {
      // 当前第几页
      this.queryInfo.pageIndex = newPage
      // 重新获取商品列表
      this.getCommodityList()
    },
    // 通过Id删除商品
    removecommodityById (id) {
      // 调用弹框询问是否要确认删除
      this.$confirm('此操作将永久删除该商品，是否继续？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确认删除
        const { data: res } = await this.$http.delete('Commodities/' + id)
        if (res.meta.status !== 200) {
          // 返回删除失败提示信息
          this.$message.error('删除失败！')
        } else {
          // 重新获取数据列表
          this.getCommodityList()
          // 返回删除成功提示信息
          this.$message.success('删除成功！')
        }
      }).catch(() => {
        // 取消删除
        // 返回取消删除提示信息
        this.$message.info('已取消删除！')
      })
    },
    // 展示商品回收箱对话框
    async showRecycling () {
      // 显示回收箱
      this.recyclingDialogVisible = true
      // 将伪删除成功的商品isDeleted状态赋值为true
      this.queryInfo.recycle = !this.queryInfo.recycle
      // 调用获取商品列表的函数
      this.getCommodityList()
    },
    // 回收箱退出
    recyclingDialogExit () {
      // 隐藏回收箱
      this.recyclingDialogVisible = false
      // 将回收箱的状态取反
      this.queryInfo.recycle = !this.queryInfo.recycle
      // 重新获取商品列表
      this.getCommodityList()
    },
    // 恢复商品
    async recyclingcommodity (id) {
      const { data: res } = await this.$http.delete('Commodities/recovery/' + id)
      if (res.meta.status !== 200) {
        // 商品恢复失败
        this.$message.error('商品恢复失败！')
      } else {
        // 商品恢复成功
        this.$message.success('商品恢复成功！')
        // 刷新已被删除商品的列表
        this.getCommodityList()
      }
    },
    // 彻底删除商品
    deletecommodityById (id) {
      // 弹框询问商品是否确认彻底删除
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确认
        const { data: res } = await this.$http.delete('Commodities/delete/' + id)
        if (res.meta.status !== 200) {
          // 彻底删除商品失败
          this.$message.error('彻底删除该商品失败！')
        } else {
          // 彻底删除商品成功
          this.$message.success('彻底删除该商品成功！')
          // 重新获取商品数据列表
          this.getCommodityList()
        }
      }).catch(() => {
        // 取消
        this.$message.info('已取消彻底删除！')
      })
    },
    // 解决 el-select 设置默认值后无法切换选项
    handleSelectChange () {
      // 原因：select已经绑定了值，render函数没有自动更新，数据刷新了但是视图没有刷新
      // 解决方法：使用this.$forceUpdate()重新render
      this.$forceUpdate()
    },
    // 添加商品
    goodsAdd () {
      this.$router.push('goodsAdd')
    },
    // 编辑商品
    goodsEdit (id) {
      this.$router.push({ path: 'goodsAdd', query: { goodsId: id } })
    }
  }
}
</script>

<style lang="css" scoped>
/* 回收箱 */
.recycling {
  /* 图标大小 */
  font-size: 33px;
  /* 动态容器 */
  display: flex;
  /* 尾部对齐 */
  justify-content: flex-end;
}
</style>
